@extends('public.webLayouts')
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Content-->
    <div class="md-content">
        <!-- hero -->
        <div class="hero" id="id-1" style="background-image: url('/style/admin/assets/img/bg/1.jpg');">
            <div class="hero__wrapper">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 ">
                            <h1 class="hero__title">NI SHI SHA BI

                                <!-- typing__module -->
                                <div class="typing__module" data-options='{"typeSpeed":60}'>
                                    <div class="typed-strings"><span>？</span><span>！</span><span>。</span>
                                    </div><span class="typed"></span>
                                </div><!-- End / typing__module -->

                            </h1>
                            <p class="hero__text"></p>
                        </div>
                    </div><span id="back-to-down"><i class="pe-7s-angle-down"></i></span>
                </div>
            </div>
        </div><!-- End / hero -->

        <!-- Section -->
        {{--<section class="md-section bg-gray" id="id-2">--}}
            {{--<div class="container">--}}
                {{--<div class="row">--}}
                    {{--<div class="col-lg-5 ">--}}

                        {{--<!-- slide-image -->--}}
                        {{--<div class="slide-image">--}}

                            {{--<!-- swiper__module swiper-container -->--}}
                            {{--<div class="swiper__module swiper-container slide-image__front" data-options='{"slidesPerView":1,"spaceBetween":0}'>--}}
                                {{--<div class="swiper-wrapper">--}}
                                    {{--<div class="slide-item" style="background-image: url('/style/admin/assets/img/about/1.jpg');"></div>--}}
                                    {{--<div class="slide-item" style="background-image: url('/style/admin/assets/img/about/2.jpg');"></div>--}}
                                    {{--<div class="slide-item" style="background-image: url('/style/admin/assets/img/about/3.jpg');"></div>--}}
                                {{--</div>--}}
                                {{--<div class="swiper-pagination-custom"></div>--}}
                            {{--</div><!-- End / swiper__module swiper-container -->--}}


                            {{--<!-- swiper-thumbnails__module swiper-container -->--}}
                            {{--<div class="swiper-thumbnails__module swiper-container slide-image__black" data-options='{"slidesPerView":1,"spaceBetween":0,"delay":10000}'>--}}
                                {{--<div class="swiper-wrapper">--}}
                                    {{--<div class="slide-item" style="background-image: url('/style/admin/assets/img/about/1b.jpg');"></div>--}}
                                    {{--<div class="slide-item" style="background-image: url('/style/admin/assets/img/about/2b.jpg');"></div>--}}
                                    {{--<div class="slide-item" style="background-image: url('/style/admin/assets/img/about/3b.jpg');"></div>--}}
                                {{--</div>--}}
                            {{--</div><!-- End / swiper-thumbnails__module swiper-container -->--}}

                        {{--</div><!-- End / slide-image -->--}}

                    {{--</div>--}}
                    {{--<div class="col-lg-6 col-xs-offset-0 col-sm-offset-0 col-md-offset-0 col-lg-offset-1 ">--}}

                        {{--<!-- title -->--}}
                        {{--<div class="title">--}}
                            {{--<h2 class="title__title">Hello from Armando</h2>--}}
                        {{--</div><!-- End / title -->--}}

                        {{--<p class="fz-16">Duis porttitor libero ac egestas euismod. Maecenas quis felis turpis. Nulla quis turpis sed augue</p>--}}
                        {{--<p class="fz-16">Curabitur elementum urna augue, eu porta purus gravida in. Cras consectetur, lorem a cursus vestibulum, ligula purus iaculis nulla, in dignissim risus turpis id justo. Sed eleifend ante et ligula eleifend ultricies. Fusce porta feugiat nisl, eget faucibus augue ultrices et. Nullam id leo fringilla,</p>--}}
                    {{--</div>--}}
                {{--</div>--}}

                {{--<!-- swiper__module swiper-container -->--}}
                {{--<div class="swiper__module swiper-container mt-50" data-options='{"slidesPerView":3,"spaceBetween":30,"autoplay":2000,"breakpoints":{"640":{"slidesPerView":1},"991":{"slidesPerView":2}}}'>--}}
                    {{--<div class="swiper-wrapper">--}}

                        {{--<!-- service -->--}}
                        {{--<div class="service mb-0">--}}
                            {{--<div class="service__icon"><i class="pe-7s-paint-bucket"></i></div>--}}
                            {{--<h3 class="service__title">Social Media</h3>--}}
                            {{--<p class="service__text">Suspendisse ac elit vitae est lacinia interdum eu sit amet mauris. Phasellus</p>--}}
                        {{--</div><!-- End / service -->--}}


                        {{--<!-- service -->--}}
                        {{--<div class="service mb-0">--}}
                            {{--<div class="service__icon"><i class="pe-7s-paint-bucket"></i></div>--}}
                            {{--<h3 class="service__title">Social Media</h3>--}}
                            {{--<p class="service__text">Integer placerat ullamcorper urna nec rhoncus. Sed velit justo, lacinia non</p>--}}
                        {{--</div><!-- End / service -->--}}


                        {{--<!-- service -->--}}
                        {{--<div class="service mb-0">--}}
                            {{--<div class="service__icon"><i class="pe-7s-lintern"></i></div>--}}
                            {{--<h3 class="service__title">Investment Planning</h3>--}}
                            {{--<p class="service__text">Mauris lacinia venenatis dolor sit amet viverra. Integer malesuada nulla neque.</p>--}}
                        {{--</div><!-- End / service -->--}}


                        {{--<!-- service -->--}}
                        {{--<div class="service mb-0">--}}
                            {{--<div class="service__icon"><i class="pe-7s-gleam"></i></div>--}}
                            {{--<h3 class="service__title">Risk Management</h3>--}}
                            {{--<p class="service__text">Curabitur elementum urna augue, eu porta purus gravida in. Cras consectetur,</p>--}}
                        {{--</div><!-- End / service -->--}}


                        {{--<!-- service -->--}}
                        {{--<div class="service mb-0">--}}
                            {{--<div class="service__icon"><i class="pe-7s-anchor"></i></div>--}}
                            {{--<h3 class="service__title">Marketing Planning</h3>--}}
                            {{--<p class="service__text">Duis porttitor libero ac egestas euismod. Maecenas quis felis turpis. Nulla quis</p>--}}
                        {{--</div><!-- End / service -->--}}


                        {{--<!-- service -->--}}
                        {{--<div class="service mb-0">--}}
                            {{--<div class="service__icon"><i class="pe-7s-refresh"></i></div>--}}
                            {{--<h3 class="service__title">Site Security</h3>--}}
                            {{--<p class="service__text">Etiam non varius justo, vel tempor mi. Nulla facilisi. Fusce at tortor arcu.</p>--}}
                        {{--</div><!-- End / service -->--}}


                        {{--<!-- service -->--}}
                        {{--<div class="service mb-0">--}}
                            {{--<div class="service__icon"><i class="pe-7s-joy"></i></div>--}}
                            {{--<h3 class="service__title">Risk Management</h3>--}}
                            {{--<p class="service__text">Integer placerat ullamcorper urna nec rhoncus. Sed velit justo, lacinia non</p>--}}
                        {{--</div><!-- End / service -->--}}


                        {{--<!-- service -->--}}
                        {{--<div class="service mb-0">--}}
                            {{--<div class="service__icon"><i class="pe-7s-lock"></i></div>--}}
                            {{--<h3 class="service__title">Investment Planning</h3>--}}
                            {{--<p class="service__text">Mauris lacinia venenatis dolor sit amet viverra. Integer malesuada nulla neque.</p>--}}
                        {{--</div><!-- End / service -->--}}


                        {{--<!-- service -->--}}
                        {{--<div class="service mb-0">--}}
                            {{--<div class="service__icon"><i class="pe-7s-magnet"></i></div>--}}
                            {{--<h3 class="service__title">Site Security</h3>--}}
                            {{--<p class="service__text">Nam elit ligula, egestas et ornare non, viverra eu justo. Aliquam ornare lectus</p>--}}
                        {{--</div><!-- End / service -->--}}

                    {{--</div>--}}
                {{--</div><!-- End / swiper__module swiper-container -->--}}

            {{--</div>--}}
        {{--</section>--}}
        <!-- End / Section -->


        <!-- Section -->
        <section class="md-section" id="id-3">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 ">

                        <!-- title -->
                        <div class="title">
                            <h2 class="title__title">沙陵陂三帅</h2>
                        </div><!-- End / title -->

                    </div>
                </div>
                <div class="grid-css grid-css--grid" data-col-lg="3" data-col-md="2" data-col-sm="2" data-col-xs="1" data-gap="30">
                    <div class="filter">
                        <ul class="filter__list">
                            <li><a href="#" data-filter="*">全部</a></li>
                            <li><a href="#" data-filter=".cat1">易发育</a></li>
                            <li><a href="#" data-filter=".cat2">阳文虚</a></li>
                            <li><a href="#" data-filter=".cat3">猪龙皮</a></li>
                        </ul>
                    </div>
                    <div class="grid__inner">
                        <div class="grid-sizer"></div>
                        {{--类型1 视频类  --}}
                        {{--<div class="grid-item normal cat1 cat4">--}}
                            {{--<div class="grid-item__inner">--}}
                                {{--<div class="grid-item__content-wrapper">--}}

                                    {{--<!-- portfolio -->--}}
                                    {{--<div class="portfolio" href="https://www.youtube.com/watch?v=XNqn4gEakQA"><a class="portfolio__bg popup-video" href="https://www.youtube.com/watch?v=XNqn4gEakQA" style="background-image: url('/style/admin/assets/img/portfolio/1.jpg');" data-effect="mfp-zoom-in"><img src="/style/admin/assets/img/portfolio/1.jpg"/>--}}
                                            {{--<div class="portfolio__icon"><i class="fa fa-play"></i></div></a>--}}
                                    {{--</div><!-- End / portfolio -->--}}

                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                        {{--类型1  --}}
                        <div class="grid-item normal cat1">
                            <div class="grid-item__inner">
                                <div class="grid-item__content-wrapper">

                                    <!-- portfolio -->
                                    <div class="portfolio" href="/img/1.JPG"><a class="portfolio__bg" href="/img/1.JPG" style="background-image: url('/img/1.JPG');" data-effect="mfp-zoom-in"><img src="/img/1.JPG"/></a>
                                    </div><!-- End / portfolio -->

                                </div>
                            </div>
                        </div>
                        <div class="grid-item normal cat1">
                            <div class="grid-item__inner">
                                <div class="grid-item__content-wrapper">

                                    <!-- portfolio -->
                                    <div class="portfolio" href="/img/4.JPG"><a class="portfolio__bg" href="/img/4.JPG" style="background-image: url('/img/4.JPG');" data-effect="mfp-zoom-in"><img src="/img/4.JPG"/></a>
                                    </div><!-- End / portfolio -->

                                </div>
                            </div>
                        </div>
                        <div class="grid-item normal cat2">
                            <div class="grid-item__inner">
                                <div class="grid-item__content-wrapper">

                                    <!-- portfolio -->
                                    <div class="portfolio" href="/img/3.JPG"><a class="portfolio__bg" href="/img/3.JPG" style="background-image: url('/img/3.JPG');" data-effect="mfp-zoom-in"><img src="/img/3.JPG"/></a>
                                    </div><!-- End / portfolio -->

                                </div>
                            </div>
                        </div>
                        <div class="grid-item normal cat3">
                            <div class="grid-item__inner">
                                <div class="grid-item__content-wrapper">

                                    <!-- portfolio -->
                                    <div class="portfolio" href="/img/2.JPG"><a class="portfolio__bg" href="/img/2.JPG" style="background-image: url('/img/2.JPG');" data-effect="mfp-zoom-in"><img src="/img/2.JPG"/></a>
                                    </div><!-- End / portfolio -->

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End / Section -->
        <!-- Section -->
        {{--<section class="md-section bg-gray" id="id-4">--}}
            {{--<div class="container">--}}
                {{--<div class="row">--}}
                    {{--<div class="col-xs-12">--}}

                        {{--<!-- title -->--}}
                        {{--<div class="title">--}}
                            {{--<h2 class="title__title">Our blog</h2>--}}
                        {{--</div><!-- End / title -->--}}

                    {{--</div>--}}
                {{--</div>--}}
                {{--<div class="row">--}}
                    {{--<div class="col-lg-4 ">--}}

                        {{--<!--  -->--}}
                        {{--<div>--}}
                            {{--<div class="post__media"><a href="#"><img src="/style/admin/assets/img/blog/1.jpg" alt=""/></a></div>--}}
                            {{--<div class="post__body">--}}
                                {{--<h2 class="post__title"><a href="#">Getting Started with Vue.Js</a></h2>--}}
                                {{--<div class="post__meta"><span class="author"><a href="#">Ashley Mills</a></span><span class="date">Jan 3, 2018</span></div>--}}
                                {{--<p class="post__text">Suspendisse ac elit vitae est lacinia interdum eu sit amet mauris. Phasellus aliquam nisi sit amet libero mattis ornare. In varius</p>--}}
                            {{--</div>--}}
                        {{--</div><!-- End /  -->--}}

                    {{--</div>--}}
                    {{--<div class="col-lg-4 ">--}}

                        {{--<!--  -->--}}
                        {{--<div>--}}
                            {{--<div class="post__media"><a href="#"><img src="/style/admin/assets/img/blog/2.jpg" alt=""/></a></div>--}}
                            {{--<div class="post__body">--}}
                                {{--<h2 class="post__title"><a href="#">The Essential Guide to UX for AR</a></h2>--}}
                                {{--<div class="post__meta"><span class="author"><a href="#">Bryan Ryan</a></span><span class="date">Jan 21, 2018</span></div>--}}
                                {{--<p class="post__text">Mauris lacinia venenatis dolor sit amet viverra. Integer malesuada nulla neque. Sed rutrum ligula eu sagittis volutpat. Aliquam</p>--}}
                            {{--</div>--}}
                        {{--</div><!-- End /  -->--}}

                    {{--</div>--}}
                    {{--<div class="col-lg-4 ">--}}

                        {{--<!--  -->--}}
                        {{--<div>--}}
                            {{--<div class="post__media"><a href="#"><img src="/style/admin/assets/img/blog/3.jpg" alt=""/></a></div>--}}
                            {{--<div class="post__body">--}}
                                {{--<h2 class="post__title"><a href="#">Design a Perfect Homepage</a></h2>--}}
                                {{--<div class="post__meta"><span class="author"><a href="#">Alice Brooks</a></span><span class="date">Jan 23, 2018</span></div>--}}
                                {{--<p class="post__text">Sed ante nisl, fermentum et facilisis in, maximus sed ipsum. Cras hendrerit feugiat eros, ut fringilla nunc finibus sed. Quisque</p>--}}
                            {{--</div>--}}
                        {{--</div><!-- End /  -->--}}

                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
        {{--</section>--}}
        <!-- End / Section -->


        <!-- Section -->
        <section class="md-section" id="id-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 ">

                        <!-- title -->
                        <div class="title">
                            <h2 class="title__title">和我们联系</h2>
                        </div><!-- End / title -->

                        <div class="mb-40">

                            <!-- contact -->
                            <div class="contact">
                                <h3 class="contact__title">地址</h3>
                                <div>上海市，徐汇区</div>
                            </div><!-- End / contact -->


                            <!-- contact -->
                            <div class="contact">
                                <h3 class="contact__title">邮箱</h3>
                                <div><a href="">a752837814@qq.com</a></div>
                            </div><!-- End / contact -->


                            <!-- contact -->
                            <div class="contact">
                                <h3 class="contact__title">电话</h3>
                                <div>137****9135</div>
                            </div><!-- End / contact -->

                        </div>
                    </div>
                    <div class="col-lg-7 col-xs-offset-0 col-sm-offset-0 col-md-offset-0 col-lg-offset-1 ">

                        <!-- title -->
                        <div class="title">
                            <h2 class="title__title">留言</h2>
                        </div><!-- End / title -->

                        <div class="form-wrapper">

                            <!-- form-item -->
                            <div class="form-item form-item--half">
                                <label class="form__label">手机号码<span style="color: red">*</span></label>
                                <input class="form-control" type="text" name="tel" placeholder=""/>
                            </div><!-- End / form-item -->


                            <!-- form-item -->
                            <div class="form-item form-item--half">
                                <label class="form__label">昵称<span>*</span></label>
                                <input class="form-control" type="text" name="nickname" placeholder=""/>
                            </div><!-- End / form-item -->


                            <!-- form-item -->
                            <div class="form-item">
                                <label class="form__label">留言<span>*</span></label>
                                <textarea class="form-control" name="msg"></textarea>
                            </div>
                            <!-- End / form-item -->
                            <!-- form-item -->
                            <div class="form-item">
                                <a id="send" class="md-btn btn-custom" onclick="send(this)">发送
                                </a>
                            </div>
                            <!-- End / form-item -->

                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End / Section -->
    </div>
    <!-- End / Content-->
    <EMBED SRC="http://www.ytmp3.cn/down/55737.mp3" loop=true width=0 height=0>
@endsection
@section('script')
    <script>
        /*发送反馈*/
        function send(e) {
            var tel = $("input[name='tel']").val(); //手机号码
            var nickname = $("input[name='nickname']").val(); //昵称
            var msg = $("textarea[name='msg']").val(); //留言
            if (!tel){
                layer.msg("手机号码不能为空");return false;
            }
            var tel_reg = /^1[3-8]{1}[0-9]{9}$/; //正则验证手机号
            if (!tel_reg.test(tel)){
                layer.msg("请填写正确的手机号码!");return false;
            }
            /*加载层  防止重复点击*/
            var index = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
            $("#send").attr("disabled",true); //防止重复点击
            $.ajax({
                type: "POST",
                url: '{{route('add-feedback')}}',
                data: {
                    'tel': tel,
                    'nickname': nickname,
                    'msg': msg,
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'json',
                success : function (msg) {
                    if (msg.code == 200) {
                        //关闭加载层
                        layer.close(index);
                        layer.msg(msg.message);
                        setTimeout(location.reload(), '30000');
                    } else{
                        //关闭加载层
                        layer.close(index);
                        layer.msg(msg.message);
                    }

                }
            });
        }

    </script>
@endsection


